<template>
  <div class="container">
    <div class="title">
      {{title}}
    </div>
    <div class="panel">
      <a-form
        ref="refForm"
        :model="form"
        :rules="formRules"
        class="form" 
        :label-col="{span: 5}" 
        :wrapper-col="{span: 19}"
      >
        <a-form-item label="账号" name="account">
          <a-input v-model:value="form.account" allowClear>
            <template #prefix><UserOutlined/></template>
          </a-input>
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input-password v-model:value="form.password" allowClear @pressEnter="handleSubmit">
            <template #prefix><LockOutlined/></template>
          </a-input-password>
        </a-form-item>
      </a-form>
      <a-button type="primary" style="width:100%" :loading="form.submitting" @click="handleSubmit">登录</a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, getCurrentInstance, ref, reactive } from 'vue';
  import { useRouter } from 'vue-router'
  import { 
    UserOutlined, 
    LockOutlined 
  } from '@ant-design/icons-vue';

  export default defineComponent({
    components: {
      UserOutlined,
      LockOutlined,
    },
    setup() {
      const title = ref('不想取名字')
      const form = reactive({
        account: '',
        password: '',
        submitting: false
      })
      const router = useRouter()

      const formRules = reactive({
        account: {required: true, message: '账号不能为空'},
        password: {required: true, message: '账号不能为空'},
      })

      const refForm = ref()

      const internalInstance = getCurrentInstance()

      const handleSubmit = async () => {
        await refForm.value.validate()
        form.submitting = true
        if (internalInstance) {
          const utils = internalInstance.appContext.config.globalProperties.$utils
          await utils.post('/login')
          .finally(() => {
            form.submitting = false
          })
          router.push('/introduce')
        }
      }

      return {
        title,
        form,
        formRules,
        refForm,
        handleSubmit
      }
    }
  })
</script>

<style lang="scss">
  .container {
    height: 100%;
    background-image: linear-gradient(0deg, #332175, #048181);
    padding-top: 26vh;
    .title {
      text-align: center;
      color: #FFF;
      margin-bottom: 20px;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 48px;
      padding-left: 48px;
    }
    .panel {
      margin: 0 auto;
      width: 320px;
      position: relative;
      padding: 20px;
      background: #FFF;
    }
  }
</style>